import React, { Component } from 'react';
import { PullToRefresh } from 'antd-mobile'
import axios from 'axios'
import Header from '@components/Header/Header'
import Swiper from './Swiper/Swiper'
import Search from '@components/Search/Search'
import BoutiqueItem from '@components/BoutiqueItem/BoutiqueItem'

import './CookBook.less'

class CookBook extends Component {

    state = {
        hotCategory: [],
        boutique: [],
        refreshing: false,
        down: true,
        height: document.documentElement.clientHeight,
    }

    componentDidMount() {
        axios.get('/getHotCategory').then(res => {
            if (res.data.status === 200) {
                this.setState({
                    hotCategory: res.data.data
                })
            }
        })

        axios.get('/getBoutique').then(res => {
            if (res.data.status === 200) {
                this.setState({
                    boutique: res.data.data.map(v => {
                        v.title = v.title.slice(0, v.title.length - 1)
                        return v
                    })
                })
            }
        })
    }

    // 美图搜索
    cookBookSearch = (val) => {
        console.log(val)
    }

    // 无限滚动
    infiniteScroll = () => {
        console.log(1)
    }

    render() {
        return (
            <div className="cookbook">
                <Header>随机图片</Header>
                <Swiper />
                <Search cookBookSearch={this.cookBookSearch} />
                <div className="title">热门分类</div>
                <div className="category">
                    {
                        this.state.hotCategory.map(v => {
                            return (
                                <a href="/" key={v.id}>{v.title}</a>
                            )
                        })
                    }
                </div>
                <div className="title">精品好图</div>

                <PullToRefresh
                    damping={60}
                    ref={el => this.ptr = el}
                    style={{
                        height: this.state.height,
                        overflow: 'auto',
                    }}
                    direction={'down'}
                    refreshing={this.state.refreshing}
                    onRefresh={this.infiniteScroll}
                >
                    <div className="boutique">
                        {
                            this.state.boutique.map(v => {
                                return (
                                    <BoutiqueItem key={v.id} {...v}></BoutiqueItem>
                                )
                            })
                        }
                    </div>
                </PullToRefresh>
            </div>
        );
    }
}

export default CookBook;